<template>
    <!--主要内容 订单列表-->
    <div class="order-main">
        <div class="container">
            <div class="order-body">
                <!--左侧列表-->
                <div class="order-left">
                    <dl>
                        <dt><i>·</i> 订单中心</dt>
                        <dd>我的订单</dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 关注中心</dt>
                        <dd>关注的房屋 </dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 客户服务</dt>
                        <dd>意见建议 </dd>
                        <dd>购买咨询 </dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 设置</dt>
                        <dd>个人信息 </dd>
                    </dl>
                </div>
                <!-- 右侧内容 -->
                <div class="order-right">
                    <!--订单内容-->
                    <div class="order-content">
                        <div class="title">
                            <h3>我的订单</h3>
                        </div>
                        <div class="chosetype">
                            <table>
                                <thead>
                                <tr>
                                    <th width="20%">商品</th>
                                    <th width="25%">订单详情</th>
                                    <th width="15%">商家电话</th>
                                    <th width="10%">收货人</th>
                                    <th>金额</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="orders">

                            <table class="order-item" v-for="item in page" :key="item.id">
                                <thead>
                                <tr>
                                    <th colspan="6">
                                                <span class="ordertitle">{{item.createTime}}　订单编号：{{item.id}} <span
                                                        class="pull-right delete"><i class="el-icon-delete"></i></span></span>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td width="40%">
                                        <div class="typographic">
<!--                                            <img src="./images/goods.png">-->
                                            <a href="#" class="block-text">{{item.houseName}}</a>
                                            <a href="#" class="service">售后申请</a>
                                        </div>
                                    </td>
                                    <td rowspan="2" width="20%" class="center">{{item.userPhone}}</td>
                                    <td rowspan="2" width="8%" class="center">{{item.touristName}}</td>
                                    <td rowspan="2" width="13%" class="center">
                                        <ul class="unstyled">
                                            <li>总金额¥{{item.price}}.00</li>
                                            <li>{{item.payMethod}}支付</li>

                                        </ul>
                                    </td>
                                    <td rowspan="2" width="8%" class="center">
                                        <a href="#" class="btn">已完成 </a>
                                    </td>
                                    <td rowspan="2" width="13%" class="center">
                                        <ul class="unstyled">
                                            <li>
                                                <router-link to="/home">评价|晒单</router-link>
                                            </li>

                                        </ul>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="choose-order">
                            <div class="pagination">
                                <ul>
                                    <li class="prev disabled">
                                        <a href="javascript:">«上一页</a>
                                    </li>
                                    <li class="page actived">
                                        <a href="javascript:">1</a>
                                    </li>
                                    <li class="next disabled">
                                        <a href="javascript:">下一页»</a>
                                    </li>
                                </ul>
                                <div>
                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;共1页&nbsp;</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getTourist} from '@/api/index'
    export default {
        name: "MyOrder",
        data(){
            return{
                user_id: undefined,
                page: {
                },
            }
        },
        created() {
            // this.loginInfo()
            this.touristList();
        },
        methods:{
            // loginInfo(){
            //     let data= JSON.parse(sessionStorage.getItem("LoginInfo"))
            //     this.user_id = data.id
            //     console.log(this.user_id)
            //     return JSON.parse(sessionStorage.getItem("LoginInfo"))
            //
            // },
            touristList(){
                let data= JSON.parse(sessionStorage.getItem("LoginInfo"))
                this.user_id = data.id
                getTourist(this.user_id).then(response => {
                    if(response.code===200) {
                        this.page=response.data
                        console.log(this.page)
                    }
                })
            }
        }

    }
</script>

<style scoped lang="less">
    //中间主体内容
    .order-main {
        .container {
            margin: 0 auto;
            width: 1200px;
            .order-body {
                padding: 10px;
                color: #333;
                &:after {
                    content: "";
                    display: block;
                    clear:both;
                }
                //左边
                .order-left {
                    float: left;
                    width: 16.67%;

                    dl {
                        line-height: 28px;
                        dt {
                            font-weight: 700;
                            padding: 5px;
                            i {
                                color: #77b72c;
                            }
                        }
                        dd {
                            margin: 0 0 6px;
                            border-bottom: 1px solid #ededed;
                            text-align: center;
                        }
                    }
                }
                //右边
                .order-right {
                    float: right;
                    width:83.33%;

                    //订单部分
                    .order-content {
                        margin: 0 20px;
                        color: #666;

                        //标题
                        .title {
                            margin-bottom: 22px;
                            border: 1px solid #ddd;
                            h3 {
                                padding: 12px 10px;
                                font-size: 15px;
                                background-color: #f1f1f1;

                            }
                        }
                        //表头
                        .chosetype {
                            margin-bottom: 15px;
                            color: #666;
                            table {
                                border: 1px solid #e6e6e6;
                                border-collapse: separate;
                                border-radius: 2px;
                                width: 100%;
                                max-width: 100%;
                                border-spacing: 0;
                                th {
                                    padding: 6px 8px;
                                    color: #666;
                                    font-weight: 700;
                                    vertical-align: bottom;
                                    background-color: #f4f4f4;
                                    line-height: 18px;
                                    border-bottom: 1px solid #e6e6e6;
                                    font-size: 12px;
                                    text-align: left;
                                }
                            }
                        }

                        // 表单内容
                        .orders {
                            font-size: 12px;
                            a {
                                &:hover {
                                    color: #4cb9fc;
                                }
                            }
                            table {
                                border: 1px solid #e6e6e6;
                                border-collapse: collapse;
                                border-radius: 2px;
                                width: 100%;
                                margin-bottom: 18px;
                                max-width: 100%;
                                th {
                                    padding: 6px 8px;
                                    line-height: 18px;
                                    text-align: left;
                                    vertical-align: bottom;
                                    background-color: #f4f4f4;
                                    font-size: 12px;
                                    color: #666;
                                    .pull-right {
                                        float:right;
                                        cursor: pointer;
                                        img {
                                            margin-right: 10px;
                                            vertical-align: middle;
                                        }
                                    }
                                }
                                td {
                                    font-size: 12px;
                                    color: #666;
                                    padding: 6px 8px;
                                    line-height: 18px;
                                    text-align: left;
                                    vertical-align: middle;
                                    border: 1px solid #e6e6e6;
                                    &.center {
                                        text-align: center;
                                    }
                                    .typographic {
                                        img {
                                            float: left;
                                            margin-right: 10px;
                                        }
                                        a {
                                            float: left;
                                            min-width: 80px;
                                            max-width: 250px;
                                            color: #e1251b;
                                            &.service {
                                                color: #666;
                                            }
                                        }
                                        span {
                                            float: left;
                                            min-width: 80px;
                                            max-width: 250px;
                                            text-align: center;
                                        }

                                    }
                                }

                            }
                        }

                        // 分页
                        .choose-order {
                            .pagination {
                                margin: 38px 0;
                                ul {
                                    font-size: 0;
                                    display: inline-block;
                                    li {
                                        display: inline-block;
                                        padding: 4px 9px;
                                        font-size: 14px;
                                        border: 1px solid #e0e9ee;
                                        &.prev,&.next {
                                            background-color: #fafafa;
                                        }
                                        &.prev {
                                            border-right-color:#28a3ef;
                                        }
                                        &.page {
                                            border-color: #28a3ef;
                                            border-left: 0;
                                            &.actived {
                                                background-color: #28a3ef;
                                                a {
                                                    color: #fff;
                                                }

                                            }
                                        }
                                    }
                                }
                                div {
                                    display: inline-block;
                                    font-size: 14px;
                                    color: #333;
                                }
                            }
                        }
                    }
                    // 猜你喜欢
                    .like{
                        border: 1px solid #ddd;
                        margin: 15px 20px;
                        .kt {
                            border-bottom: 1px solid #ddd;
                            background: #f1f1f1;
                            color: #666;
                            margin: 0;
                            padding: 12px;
                            font-size: 15px;
                        }
                        .like-list{
                            padding: 15px 11px;
                            overflow: hidden;
                            .likeItem{
                                width: 25%;
                                float: left;
                                .p-img{
                                    text-align: left;
                                    img{
                                        width: 167px;
                                        height: 123px;
                                    }
                                }
                                .attr{
                                    padding: 0 15px;
                                }
                                .price{
                                    padding: 0 15px;
                                    font-size: 16px;
                                    color: #c81623;
                                    margin-bottom: 20px;
                                }
                                .commit{
                                    padding: 0 15px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

</style>
